<template>
	<view v-if="items.length > 0" class="main_content1">
		<view v-for="(item, index) in items" :key="index" class="product">
			<text class="product_spotName1">{{ item.spotName }}</text><br />
			<text class="product_spotIntro1">{{ item.spotIntro }}</text><br />
			<image class="product_imgUrl1" :src="item.imgUrl"></image>
		</view>
		<view class="btn">
			<button class="btn1" type="primary" size="default" style="width: 80%;" @click="navigateToFillInfo()"
				v-if="isAdmin">我要报名</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'price',
		data() {
			return {
				items: [], // 存放从后端获取的商品列表数据
				state: 1 //state的初始值为普通用户（1）
			};
		},
		onLoad() {
			//获取本地存值的state值
			this.state = uni.getStorageSync('state');
			// consloe.log(this.state)

		},
		computed: {
			isAdmin() {
				return this.state === 0; //根据state的值判断是否为管理员
			}
		},
		mounted() {
			this.fetchProductList(); // 页面加载时调用获取商品列表的方法
		},
		methods: {
			fetchProductList() {
				uni.request({
					url: 'http://192.168.191.187:6379/api/common/listAll', // 后端接口地址
					method: 'GET',
					success: (res) => {
						console.log('旅游数据：', res.data);
						this.items = res.data.data; // 将返回的旅游列表数据保存到 items 中
						this.$nextTick(() => {
							console.log('数据已更新，进行页面渲染');
						});
					},
					fail: (err) => {
						console.error('请求失败：', err);
					}
				});
			},
			navigateToFillInfo() {
				this.handleAdminAction();
				uni.navigateTo({
					url: '/pages/user/fillInfo/fillInfo'
				});
			},
			handleAdminAction() {
				// 处理管理员按钮点击事件
				console.log('管理员按钮被点击');
				// 在这里修改 isAdmin 的值，来控制按钮的隐藏
				this.isAdmin = false; // 隐藏管理员按钮
			}
		}
	};
</script>

<style scoped>
	.main_content1 {
		display: flexbox;
		border: 1px solid whitesmoke;
		padding-left: 15px;
		border-width: 1px 10px;
	}

	.product_spotName1 {
		font-family: 10px;
		font-weight: bold;
		margin-bottom: 3px;
		float: left;
	}

	.main_content1 text {
		font-size: 10px;
		margin-bottom: 3px;
	}

	.main_content1 image {
		width: 130px;
		height: 100px;
		border-radius: 5px;
		margin-right: 10px;
		margin-top: 5px;
		display: flexbox;
	}

	.product_spotIntro1 {
		padding-top: 2px;
		color: darkgray;
		float: left;
	}

	.main_content1 view {
		margin-bottom: 10px;
	}

	.main_content1 {
		position: absolute;
	}

	.btn1 {
		margin-top: -45px;
		position: relative;
	}
</style>